<form class="form-horizontal" id="winModal">
    <input id="id" name="id" type="hidden">
    <div class="form-group">
        <label class="col-sm-3 control-label text-left">菜单名称：</label>
        <div class="col-sm-8">
            <input id="menuName" name="menuName" class="form-control" type="text" placeholder="请输入菜单名称">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label text-left">父类名称：</label>
        <div class="col-sm-8">
            <select class="form-control selectpicker pid" id="pid" name="pid"></select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label text-left">菜单类型：</label>
        <div class="col-sm-8">
            <label class="radio-inline menuType" for="menuType1">
                <input type="radio" value="1" name="menuType" id="menuType1" checked="checked"><i
                    class="fa fa-list"></i> 目录 </label>
            <label class="radio-inline" for="menuType2">
                <input type="radio" value="2" name="menuType" id="menuType2"><i class="fa fa-link"></i> 菜单 </label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label text-left">菜单链接：</label>
        <div class="col-sm-8">
            <input id="menuUrl" name="menuUrl" class="form-control" type="text" placeholder="请输入菜单链接">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label text-left">菜单图标：</label>
        <div class="col-sm-8">
            <input id="menuIcon" name="menuIcon" class="form-control" type="text" placeholder="请输入代码图标，仅目录可自定义">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label text-left">菜单排序：</label>
        <div class="col-sm-8">
            <input id="sort" name="sort" class="form-control" type="number" value="0" min="0" placeholder="请输入排序编号">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label text-left">信息备注：</label>
        <div class="col-sm-8">
            <input id="description" name="description" class="form-control" type="text" placeholder="请输入备注">
        </div>
    </div>
</form>
<script type="text/javascript">
    $(function () {
        var e = "<i class='fa fa-times-circle'></i> ";
        $("#winModal").validate({
            rules: { //定义验证规则,其中属性名为表单的name属性
                menuName: {
                    required: true,
                    rangelength: [2, 30],
                    remote: {
                        url: "check.json",
                        type: "post",
                        data: {
                            menuName: function () {
                                return $("#menuName").val();
                            },
                            id: function () {
                                return $("#id").val();
                            }
                        }
                    }
                },
                pid: {
                    required: false,
                    digits: true
                },
                menuType: {
                    required: true,
                    digits: true
                },
                menuUrl: {
                    required: true,
                    stringNoZhCNName: true,
                    rangelength: [2, 100],
                    remote: {
                        url: "check.json",
                        type: "post",
                        data: {
                            menuUrl: function () {
                                return $("#menuUrl").val();
                            },
                            id: function () {
                                return $("#id").val();
                            }
                        }
                    }
                },
                menuIcon: {
                    required: true,
                    rangelength: [0, 30],
                    stringEnName: true
                },
                sort: {
                    required: true,
                    digits: true
                },
                description: {
                    required: false,
                    rangelength: [0, 20]
                }
            },
            messages: { //自定义验证消息
                menuName: {
                    required: e + "请输入菜单名称",
                    rangelength: $.validator.format(e + "菜单名称位数要在{0}-{1}个字符之间。"),
                    remote: $.validator.format(e + "菜单名称“{0}”已经被占用。")
                },
                pid: {
                    required: e + "请选择分类名称"
                },
                menuType: {
                    required: e + "请选择菜单类型"
                },
                menuUrl: {
                    required: e + "请输入菜单链接",
                    stringNoZhCNName: e + "不能包括中文字符",
                    rangelength: $.validator.format(e + "代码路径位数要在{0}-{1}个字符之间。"),
                    remote: $.validator.format(e + "代码路径“{0}”已经被占用。")
                },
                menuIcon: {
                    required: e + "请输入代码图标的样式，<a href=\"http://fortawesome.github.io/Font-Awesome/icons/\" target=\"_blank\">查找<\/a>",
                    stringNoZhCNName: e + "不能包括中文字符"
                },
                description: {
                    required: e + "请输入备注信息",
                    rangelength: $.validator.format(e + "备注信息长度要在{0}-{1}个字符之间。"),
                },
                sort: {
                    required: e + "排序编号不正确，只允许为正整数"
                }
            }
        });

    });
</script>